<template>
  <div>
    <div>
      <span class="basic">货代询价</span>
    </div>
    <!--搜索-->
    <div class="toolbar">
      <el-text class="mx-1">询价编号:&nbsp;</el-text>
      <el-input
        v-model="data.enquiyid"
        placeholder="请输入"
        style="width: 200px; margin-right: 10px"
      />
      <el-text class="mx-1">订单编号:&nbsp;</el-text>
      <el-input
        v-model="data.orderid"
        placeholder="请输入"
        style="width: 200px; margin-right: 10px"
      />
      <el-button type="primary" @click="getList">查询</el-button>
      <el-button type="primary" @click="reset">重置</el-button>
    </div>
    <div class="add">
      <el-button type="info" @click="goToAddForwEnquiry">添加</el-button>
    </div>
    <!-- 表格数据 -->
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="enquiyid" label="询价编号" align="center" />
      <el-table-column prop="orderid" label="订单编号" align="center" />
      <el-table-column prop="enquiryTime" label="询价时间" align="center" />
      <el-table-column prop="status" label="状态" align="center">
        <template #default="{ row }">
          <span v-if="row.status == 1">待报价</span>
          <span v-else-if="row.status == 2">已报价</span>
          <span v-else-if="row.status == 3">报价中</span>
        </template>
      </el-table-column>
      <el-table-column prop="reason" label="原因" align="center" />
      <el-table-column label="操作" align="center" width="300px">
        <template #default="{ row }">
          <el-button v-if="row.status == 1" @click="goToQuote(row)"
            >编辑</el-button
          >
          <el-button
            v-else-if="row.status == 2"
            type="primary"
            @click="updateToQuote(row)"
            >详情</el-button
          >
          <el-button type="success" @click="getQuote(row)">查看报价</el-button>
          <el-butto type="warning">催促报价</el-butto>
        </template>
      </el-table-column>
    </el-table>
    <div style="background-color: #fff">
      <el-pagination
        layout="prev, pager, next,sizes,total,jumper"
        :total="total"
        @current-change="chpage"
        @size-change="chsize"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onBeforeMount } from "vue";
import { getEnquiry } from "@/api/forworder/forworder.js";
import { useRouter } from "vue-router";
import { getUser } from "@/utils/session.js";
const user = getUser();
const router = useRouter(); // 获取路由对象
const tableData = ref([]);
const page = ref(1);
const pageSize = ref(10);
const aaa = ref(1);
const total = ref(0); // 总记录数
const data = ref({
  id: "", // 搜索条件: 询价编号
  orderid: "" // 搜索条件: 订单编号
});

// 分页查询员工列表
async function getList() {
  // 准备查询参数
  let params = {
    page: page.value,
    pageSize: pageSize.value,
    enquiyid: data.value.enquiyid, // 使用用户输入的询价编号
    orderid: data.value.orderid // 使用用户输入的订单编号
  };

  // 向后端发起请求，传递搜索参数
  let resu = await getEnquiry(params);

  if (resu.code == 200) {
    tableData.value = resu.data.list;
    page.value = resu.data.page;
    pageSize.value = resu.data.pageSize;
    total.value = resu.data.total;

    // 遍历列表并格式化 enquiryTime
    tableData.value = tableData.value.map(item => {
      if (item.enquiryTime) {
        item.enquiryTime = new Date(item.enquiryTime).toLocaleString(); // 格式化时间
      }
      return item;
    });
  }
}

// 重置表单
function reset() {
  data.value.enquiyid = "";
  data.value.orderid = "";
  getList(); // 重置后重新加载列表
}

// 分页处理
function chpage(pg) {
  page.value = pg;
  getList();
}

function chsize(ps) {
  pageSize.value = ps;
  page.value = 1;
  getList();
}
/**
 * 点击添加跳转页面
 */
function goToAddForwEnquiry() {
  router.push({
    path: "/enquiry/AddForwEnquiry",
    query: {
      userid: user.id
    }
  });
}
// 点击报价按钮时跳转
function goToQuote(row) {
  router.push({
    name: "quote", // 跳转的目标页面名称
    query: {
      enquiryId: row.enquiyid, // 传递询价编号作为查询参数
      mode: "add"
    }
  });
}
// 点击查看报价按钮时跳转
function getQuote(row) {
  router.push({
    name: "getQuote", // 跳转的目标页面名称
    query: {
      enquiryId: row.enquiyid // 传递询价编号作为查询参数
    }
  });
}
// 点击修改报价按钮时跳转
function updateToQuote(row) {
  router.push({
    name: "quote", // 跳转的目标页面名称
    query: {
      enquiryId: row.enquiyid, // 传递询价编号作为查询参数
      mode: "update"
    }
  });
}
// 初始化加载列表
onBeforeMount(() => {
  getList();
});
</script>

<style scoped>
.basic {
  font-size: 24px;
  font-weight: bold;
  color: #0054a6;
  display: inline-block;
  border-style: none;
}
</style>
